let path = require('path');
let {CleanWebpackPlugin} = require('clean-webpack-plugin')
let html = require('html-webpack-plugin');
module.exports = {
  mode:'development',
  entry:'./src/index.js',
  output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist')
  },
  plugins:[
    new CleanWebpackPlugin(),
    new html({
      template:'./public/index.html',
      filename:'index.html'
    })
  ],
  module:{
    rules:[
      {
        test:/\.js$/,
        // use:{
        //   loader:'babel-loader',// 但用这个loader不会转义
        //   // 预设  presets
        //   // 插件 plugins
        //   // babel的配置 .babelrc   babel.config.js   options
        //   options:{
        //     presets:[
        //       '@babel/preset-env' // 告诉babel 转译成哪个版本
        //     ],
        //     // @babel/plugin-proposal-class-properties 可以让我们辨析为class中的高级语法
        //     // @babel/runtime-corejs3  它是负责 重写原型上的方法
        //     plugins:[
        //       ["@babel/plugin-proposal-decorators", { "legacy": true }], // 装饰器
        //       ["@babel/plugin-proposal-class-properties",{loose:true}], // class 高级语法
        //       ["@babel/plugin-transform-runtime",{
        //         corejs:3
        //       }]
        //     ]
        //   }
        // },
        use:'babel-loader',
        // include:path.resolve(__dirname,'src'),// 只编译 src中的文件
        exclude:/node_modules/ // 优化  排除 node_modules中的代码
      }
    ]
  },
  devtool:'eval-cheap-module-source-map',// 调式代码使用
  // devServer  最根本使用的就是 node的http模块；express是node一个框架
  // devServer 只对开发环境有效
  devServer:{
    port:9527, // 起服务的端口号 默认8080
    open:true,// 自动打开浏览器
    hot:true, // 热更新// 可以在不刷新页面的情况下 更新对应的模块
    // 假如我们更新了一个地方 但是 不会触发模块更新的 hot true这时回刷新浏览器
    // hotOnly:true
    contentBase:'./static',// 把这个文件夹当作一个静态服务 express.static
    proxy:{
      // 解决跨域的一个配置
      '/api':{
        target:'http://localhost:3000',
        changeOrigin: true,// 改变请求的域名的变成后台本身的域名
        pathRewrite:{
          '^/api':'' ,// 我们写的路径可能时 /api/user  但是后台的接口只是 /user
        }
      }
    },
    before: function(app) {

      // mock.js 专门用来创造假数据的
      // 前端 以 get请求  /api/user的 时候  返回给前端{ custom: 'response' }
      app.get('/api/user', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
    // proxy:[
    //   {
    //     context:['/api','/api2'],
    //     target:'http://localhost:3000'
    //   }
    // ]
  }
}